<template>
  <div class="status">
    <el-card class="status-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <el-icon><Search /></el-icon>
          <span>查询申请状态</span>
        </div>
      </template>

      <div class="search-section">
        <el-form :model="searchForm" :inline="!isMobile">
          <el-form-item label="申请ID">
            <el-input
              v-model="searchForm.requestId"
              placeholder="请输入申请ID"
              :style="{ width: isMobile ? '100%' : '300px' }"
              clearable
            />
          </el-form-item>
          <el-form-item>
            <el-button 
              type="primary" 
              @click="searchStatus" 
              :loading="searching"
              :style="{ width: isMobile ? '100%' : 'auto' }"
            >
              <el-icon><Search /></el-icon>
              查询
            </el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 状态显示 -->
      <div v-if="statusData" class="status-display">
        <el-divider content-position="left">申请状态</el-divider>
        
        <el-descriptions :column="isMobile ? 1 : 2" border>
          <el-descriptions-item label="申请ID">
            {{ searchForm.requestId }}
          </el-descriptions-item>
          <el-descriptions-item label="状态">
            <el-tag :type="getStatusType(statusData.status)" size="large">
              {{ getStatusText(statusData.status) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="姓名">
            {{ statusData.data.user_info[1] }} {{ statusData.data.user_info[2] }}
          </el-descriptions-item>
          <el-descriptions-item label="服务类型">
            {{ statusData.data.service }}
          </el-descriptions-item>
          <el-descriptions-item label="申请时间">
            {{ formatDate(statusData.data.timestamp) }}
          </el-descriptions-item>
          <el-descriptions-item label="邮箱">
            {{ statusData.data.user_info[5] }}
          </el-descriptions-item>
        </el-descriptions>

        <!-- 状态说明 -->
        <div class="status-info">
          <el-alert
            :title="getStatusMessage(statusData.status)"
            :type="getStatusType(statusData.status)"
            :closable="false"
            show-icon
          />
        </div>
      </div>

      <!-- 状态说明卡片 -->
      <div class="status-guide">
        <el-card shadow="never">
          <template #header>
            <div class="card-header">
              <el-icon><QuestionFilled /></el-icon>
              <span>状态说明</span>
            </div>
          </template>
          
          <el-timeline>
            <el-timeline-item
              timestamp="1. 提交申请"
              placement="top"
              type="primary"
            >
              <p>填写并提交预约申请表单</p>
            </el-timeline-item>
            <el-timeline-item
              timestamp="2. 邮箱确认"
              placement="top"
              type="warning"
            >
              <p>检查邮箱并点击确认链接</p>
            </el-timeline-item>
            <el-timeline-item
              timestamp="3. 系统处理"
              placement="top"
              type="info"
            >
              <p>系统自动为您寻找可用的预约时间</p>
            </el-timeline-item>
            <el-timeline-item
              timestamp="4. 完成预约"
              placement="top"
              type="success"
            >
              <p>预约成功，请检查邮箱获取详细信息</p>
            </el-timeline-item>
          </el-timeline>
        </el-card>
      </div>
    </el-card>
  </div>
</template>

<script>
import { ref, reactive, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { Search, QuestionFilled } from '@element-plus/icons-vue'
import api from '../utils/api'

export default {
  name: 'Status',
  components: {
    Search,
    QuestionFilled
  },
  setup() {
    const searching = ref(false)
    const statusData = ref(null)
    
    // 移动端检测
    const isMobile = computed(() => {
      return window.innerWidth <= 768
    })

    const searchForm = reactive({
      requestId: ''
    })

    const searchStatus = async () => {
      if (!searchForm.requestId.trim()) {
        ElMessage.warning('请输入申请ID')
        return
      }

      searching.value = true
      try {
        const response = await api.getStatus(searchForm.requestId)
        
        if (response.data.success) {
          statusData.value = response.data
          ElMessage.success('查询成功')
        } else {
          ElMessage.error(response.data.error || '查询失败')
          statusData.value = null
        }
      } catch (error) {
        if (error.response) {
          ElMessage.error(error.response.data.error || '查询失败')
        } else {
          ElMessage.error('网络错误，请检查网络连接')
        }
        statusData.value = null
      } finally {
        searching.value = false
      }
    }

    const getStatusType = (status) => {
      const typeMap = {
        'pending': 'warning',
        'confirmed': 'info',
        'completed': 'success',
        'failed': 'danger',
        'error': 'danger'
      }
      return typeMap[status] || 'info'
    }

    const getStatusText = (status) => {
      const textMap = {
        'pending': '等待确认',
        'confirmed': '已确认，处理中',
        'completed': '预约成功',
        'failed': '预约失败',
        'error': '处理异常'
      }
      return textMap[status] || '未知状态'
    }

    const getStatusMessage = (status) => {
      const messageMap = {
        'pending': '您的申请已提交，请检查邮箱并点击确认链接。',
        'confirmed': '您的申请已确认，系统正在为您处理预约，请耐心等待。',
        'completed': '恭喜！您的预约已成功，请检查邮箱获取详细信息。',
        'failed': '很抱歉，预约失败。请重新提交申请或联系客服。',
        'error': '处理过程中出现异常，请重新提交申请。'
      }
      return messageMap[status] || '状态未知'
    }

    const formatDate = (dateString) => {
      if (!dateString) return '-'
      const date = new Date(dateString)
      return date.toLocaleString('zh-CN')
    }

    return {
      searching,
      statusData,
      searchForm,
      isMobile,
      searchStatus,
      getStatusType,
      getStatusText,
      getStatusMessage,
      formatDate
    }
  }
}
</script>

<style scoped>
.status {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
}

.status-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.search-section {
  margin-bottom: 30px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
}

.status-display {
  margin-bottom: 30px;
}

.status-info {
  margin-top: 20px;
}

.status-guide {
  margin-top: 30px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .status {
    padding: 5px;
  }
  
  .search-section {
    padding: 15px;
    margin-bottom: 20px;
  }
  
  .card-header {
    font-size: 16px;
  }
  
  .el-form-item__label {
    font-size: 14px;
  }
  
  .el-input__inner {
    font-size: 14px;
  }
  
  .el-descriptions__label {
    font-size: 14px;
  }
  
  .el-descriptions__content {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .status {
    padding: 3px;
  }
  
  .search-section {
    padding: 10px;
  }
  
  .card-header {
    font-size: 14px;
  }
}
</style>


